<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <header>
      <div class="logo">
        <h1>C<b>a</b>lm</h1>
        <nav><span class="text">我的博客</span></nav>
      <nav>
        <ul>
         <li class="active"><a href="#">首页</a></li>
         <li><a href="#">博客</a></li>
         <li><a href="#">公告</a></li>
         <li><a href="#">联系</a></li>
        </ul>
      </nav>
      </div>
    </header>
    <div class="dier">
    <div class="boke">
    <div class="">
        欢迎来到我的博客
    </div>
    <div class="">
      记事本，日志，笔记，足迹，告示，活动
    </div>
  </div>
    <div class="arctile">
      <div class="">
        记得联系我！
      </div>
      <div class="arc">
      <ul>
       <li>
         <i class="iconfont icon-qq">QQ</i>
       </li>
       <li>
         <i class="iconfont icon-wechat">wechat</i>
       </li>
       <li>
         <i class="iconfont icon-weibo">weibo</i>
       </li>

      </ul>
    </div>
  </div>
</div>

   <div class="content">
   <div class="unit">
   <ul>
      <li>All</li>
      <li>图片</li>
      <li>文字</li>
      <li>语音</li>
      <li>视频</li>
    </ul>
   </div>
   <div class="list-box">
   <table>
    <tr>
     <td width="300" align="center"><a href="#"><img src="img/1.jpg" width="200" height="150"border=0 /></a><br>
        图片1</a></td>
     <td width="300" align="center"><a href="#"><img src="img/2.jpg" width="200" height="150"border=0 /></a><br>
          图片2</a></td>
     <td width="300" align="center"><a href="#"><img src="img/3.jpg" width="200" height="150"border=0 /></a><br>
            图片3</a></td>
     <td width="300" align="center"><a href="#"><img src="img/4.jpg" width="200" height="150"border=0 /></a><br>
              图片4</a></td>
            </tr>
            <tr>
     <td width="300" align="center"><a href="#"><img src="img/5.jpg" width="200" height="150"border=0 /></a><br>
                图片5</a></td>
     <td width="300" align="center"><a href="#"><img src="img/6.jpg" width="200" height="150"border=0 /></a><b>
                  图片6</a></td>
     <td width="300" align="center"><a href="#"><img src="img/7.jpg" width="200" height="150"border=0 /></a><br>
                   图片7</a></td>
     <td width="300" align="center"><a href="#"><img src="img/8.jpg" width="200" height="150"border=0 /></a><br>
                      图片8</a></td>
                    </tr>
                    <tr>
     <td width="300" align="center"><a href="#"><img src="img/9.jpg" width="200" height="150"border=0 /></a><br>
                        图片9</a></td>
     <td width="300" align="center"><a href="#"><img src="img/10.jpg" width="200" height="150"border=0 /></a><br>
                          图片10</a></td>
     <td width="300" align="center"><a href="#"><img src="img/11.jpg" width="200" height="150"border=0 /></a><br>
                            图片11</a></td>
     <td width="300" align="center"><a href="#"><img src="img/12.jpg" width="200" height="150"border=0 /></a><br>
                              图片12</a></td></tr>
    </table>
   </div>
   </div>
   <footer>
    <div class="houmian">
    <div class="left">
    hfdshmclkvzlkvnxzkln kln <br />
    hfdshmclkvzlkvnxzkln kln<br />
    hfdshmclkvzlkvnxzkln kln<br />
    </div>
    <div class="zhong1">
    hfdshmclkvzlkvnxzkln kln<br />
    jkfhdksfksdhsjgdhfssggjskbbb<br />
    jkshjxjklxnnbnbnbxngx
    </div>
    <div class="zhong2">
    hfdshmclkvzlkvnxzkln kln<br />
    fussu djglfsjglsjglsg xjglkjl<br />
    safhkkah<br />
    hfkhsukhk
    </div>
    <div class="right">

    </div>
    </div>
    </footer>
  </body>
</html>
